<template>
  <div>
    <el-button type="text" icon="el-icon-refresh-right" style="float:right">{{ $t('common.refresh') }}</el-button>
    <h5>{{ $t('model.wait') }}</h5>
    <!-- <div class="wait-group" :style="{height:calcHeight(635) + 'px'}"> -->
    <div class="wait-group">
      <template v-for="wait in waitList">
        <li class="wait-item" :style="{background:getColor(wait.dataValue)}">{{taskList.find(item => item.code == wait.panelDataType)?.description||wait.panelDataType}} <span class="wait-total">{{wait.dataValue}}</span></li>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name:"wait",
  data(){
    return {
      waitList:[],
      taskList:[]
    }
  },
  methods:{
    getList(){
      this.$post("/dataMainPendingTask/queryDataMainPendingTaskByPage",{}).then(res => {
        
          this.waitList = res.data.list
        
      })
    },
    getTaskList(){
      this.$get('/codeLookup/panelDataType').then(res => {
        
          this.taskList = res.list;
        
      })
    },
    getColor(val){
      const n = parseInt(val);
      if(n < 10){
        return '#e6a23c'
      }else if(n<20){
        return '#409eff'
      }else if(n<50){
        return '#f56c6c'
      }else{
        return '#f56c6c'
      }
    }
  },
  mounted(){
    this.getList()
    this.getTaskList()
  }
}
</script>

<style lang="scss" scoped>
.wait-group{
  overflow: auto;
  .wait-item{
    cursor: pointer;
  }
  li{
    line-height: 3em;
    border-radius: 4px;
    padding: 0 1em;
    margin-bottom: 10px;
    color: #fff;
  }
  .wait-total{
    float: right;
    font-size: 18px;
  }
}
</style>